<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        ps的快捷键
         ctrl+R 标尺
         ctrl+ 放大
         ctrl- 缩小 
         ctrl+h 显示隐藏参考线
     -->
     <style type="text/css">
         *{padding:0; margin:0;}
         /* 所有标签自带的间距清0 */
         .header{
             width:1300px; height:100px;
             background-color:pink;
         }
        .nav{
             width:1300px; height:59px; background-color:#303030;
         }
        .banner{
            width:1300px; height:431px;
            background-color: #b72298;
        }
        .news{
            width:1300px; height:250px; background-color:pink;
        }
        .web{
            width:1300px; height:287px; background-color:#f5f5f5;
        }
        .teacher{
            width:1300px; height:416px; background-color: pink;
        }
        .footer{
            width:1300px; height:124px; background-color:#111b24;
            /* 
                注意
                    1，一定要加#
                    2，#后面的数字要么是6位，要么是3位
           
                float:left; 靠左边（从左向右）
                float:right; 靠右边（从右向左）
                    */
        }
        .logo{
            width:204px; height:49px;
            background-color: yellow;
            float:left;
        }
        .header-right{
            width:298px; height:50px; background-color:#b72298;
            float:right;
        }
        .nav-a{
            width:120px; height:59px;background-color:#999;
            float:left;
        }
        .news-left{
            width:515px;
            height:250px;
            background-color: aqua;
            float:left;
        }
       .news-center{
            width:347px;
            height:250px;
            background-color: yellowgreen;
            float:left;
        }
        .news-right{
            width:241px;
            height:250px;
            background-color:red;
            float:left;
        }

        /* 
            作业要求
                1，消化记忆两天的上课内容
                2，如果是照着抄，把我写的扣丁学堂重复写3遍或以上
                3，三张图分别写上下结构，填颜色，遇到白色换其他颜色
                4，写完上下结构，写左右结构-分颜色

                5，选写
                    内容可填
        */
            .web-content{
                width:1060px; height:200px; background-color: #fff;
            }
            .web-left{
                width:276px; height:156px;
                background-color:red;
                float:left;
            }
            .web-right{
                width:699px;
                height:156px;
                background-color: yellow;
                float:right;
            }
            .teacher h3{
                float:left;
            }
            .teacher a{
                float:right;
            }
            .title{
                height:80px; width:1300px;
            }
            .teacher dl{
                width:262px; height:292px; background: #eff3f6;
                float:left;
            }
            .teacher dt img{
                width:90px; height:90px;
            }
            .teacher dt p{
                width:142px; height:26px; background: #58a0f4;
            }
           .footer p{
               color: #fff;
           }
     </style>
</head>
<body>
    <div class="header">
        <img src="images/coding_03.jpg" class="logo"/>
        <div class="header-right">
            <form>
                <input type="text" />
                <button><img src="images/coding_06.jpg" alt=""></button>
            </form>
        </div>
    </div>
    <!-- header end -->
    <div class="nav">
        <ul type="none">
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
            <li class="nav-a"><a href="#">考试认证</a></li>
        </ul>
    </div>
    <!-- nav end -->
    <div class="banner">
        <a href="#"><img src="images/coding_10.jpg"/></a>
    </div>
    <div class="news">
        <div class="news-left">
            <h3>动态新闻</h3>
            <ul>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
                <li><a href="#">今天电信网络有问题，更换光猫</a>
                    <span>2022-04-19</span>
                </li>
            </ul>
        </div>
        <div class="news-center">
            <h3>新闻咨询</h3>
            <p>新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询</p>
            <p>新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询新闻咨询</p>
        </div>
        <div class="news-right">
            <h3>新闻咨询</h3>
            <p>就问你今天没上课，开心吗，不开心，为啥呢</p>
            <a href="#">more</a>
            <img src="" alt="">
        </div>
    </div>
    <!-- news end -->
    <div class="web">
        <div class="web-content">
            <div class="web-left">
                <img src="images/pic.jpg" alt="">
            </div>
            <div class="web-right">
                <h2>HTML5大前端开发</h2>
                月薪：<span>10-15K</span><a href="#">查看就业情况</a>
                <p>HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发HTML5大前端开发</p>
            </div>
        </div>
    </div>
    <div class="teacher">
        <div class="title">
            <h3>名师面授</h3>
            <a href="#">数百位名师面授名师面授名师面授名师面授名师面授</a>
        </div>
        <dl>
            <dt>
                <img src="images/coding_10.jpg" alt="" >
                <h4>王老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/coding_10.jpg" alt="" >
                <h4>王老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/coding_10.jpg" alt="" >
                <h4>王老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
        <dl>
            <dt>
                <img src="images/coding_10.jpg" alt="" >
                <h4>王老师</h4>
                <p>原中科院专家</p>
            </dt>
            <dd>
                <p>原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家原中科院专家</p>
            </dd>
        </dl>
    </div>
    <div class="footer">
        <p>原中科院专家原中科院专家原中科院专家原中科<br />院专家原中科院专家原中科院专家</p>
    </div>
</body>
</html>